<template>
    <el-row>
        <el-col :span="24">
            <el-card>
                <el-form :inline="true">
                    <el-radio-group v-model="roomState" @change="selectAll(1)" >
                        <el-radio-button label="全部" :value="0" />
                        <el-radio-button label="未入住" :value="1"  />
                        <el-radio-button label="已入住" :value="2" />
                        <el-radio-button label="已预定" :value="4" />
                        <el-radio-button label="打扫维护" :value="3"  />
                    </el-radio-group>
                    <el-form-item style="float: right;">
                        <el-input v-model="rnumber" placeholder="请输入要搜索的房间号" @input="selectAll(1)" />
                    </el-form-item>
                </el-form>
                <el-table :data="roomList.list">
                    <el-table-column>
                        <template #default="scope">
                            <i class="iconfont icon-fangjian1" style="color: #95d475;font-size: 30px "
                                v-if="scope.row.rstate == 1"></i>
                            <i class="iconfont icon-fangjian2" style="color: #79bbff; font-size: 30px"
                                v-if="scope.row.rstate == 2"></i>
                            <i class="iconfont icon-fangjian3" style="color:#E6A23C;font-size: 30px"
                                v-if="scope.row.rstate == 3"></i>
                            <i class="iconfont icon-yuding" style="color:#67C23A;font-size: 20px"
                                v-if="scope.row.rstate == 4"></i>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="rid" label="ID" /> -->
                    <el-table-column prop="rnumber" label="房间号" />
                    <el-table-column prop="rname" label="房间名称" />
                    <el-table-column prop="rprice" label="房间价格" />
                    <el-table-column prop="rstate" label="状态">
                        <template #default="scope">
                            <el-tag type="success" v-if="scope.row.rstate == 1">可入住</el-tag>
                            <el-tag type="info" v-else-if="scope.row.rstate == 2">已入住</el-tag>
                            <el-tag type="warning" v-else-if="scope.row.rstate == 3">打扫维护</el-tag>
                            <el-tag type="primary" v-else-if="scope.row.rstate == 4">已预定</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="查看用户">
                        <template #default="scope">
                            <el-button size="small" v-if="scope.row.rstate == 2" type="info"
                                @click="selectUserByRid(scope.row.rid)">查看</el-button>
                            <el-button size="small" v-else disabled>查看</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="业务" align="center">
                        <template #default="scope">
                            <el-button size="small" v-if="scope.row.rstate == 3" disabled type="primary">
                                入住
                            </el-button>
                            <el-button size="small" v-else-if="scope.row.rstate == 2" plain type="primary"
                                @click="rnumberToAdd(scope.row.rnumber)">
                                入住
                            </el-button>
                            <el-button size="small" v-else-if="scope.row.rstate == 1" type="primary"
                                @click="rnumberToAdd(scope.row.rnumber)">
                                入住
                            </el-button>
                            <el-button size="small" v-else-if="scope.row.rstate == 4" type="primary"
                                @click="rnumberToAdd(scope.row.rnumber)">
                                入住
                            </el-button>
                            <el-button size="small" v-if="scope.row.rstate == 3" disabled type="danger">
                                退房
                            </el-button>
                            <el-button size="small" v-if="scope.row.rstate == 1" disabled type="danger">
                                退房
                            </el-button>
                            <el-button size="small" v-if="scope.row.rstate == 2"
                                @click="updateUserAndRoomState(scope.row.rnumber)" type="danger">
                                退房
                            </el-button>
                            <el-button size="small" v-if="scope.row.rstate == 4" disabled type="danger">
                                退房
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-button size="small" type="warning"  v-if="scope.row.rstate == 2" disabled >
                                修改
                            </el-button>
                            <el-button size="small" type="warning" v-else @click="selectByRnumber(scope.row.rnumber)">
                                修改
                            </el-button>
                            <el-button size="small" plain type="info" @click="deleteByRnumber(scope.row.rnumber)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row class="row-bg" justify="center" style="margin-top: 20px;">
                    <el-pagination layout="prev, pager, next" :total="roomList.total" :page-size="roomList.pageSize"
                        @change="selectAll" />
                </el-row>
            </el-card>
        </el-col>
    </el-row>
    <!-- 查看用户对话框 -->
    <el-dialog v-model="selectUsers" title="用户信息" width="800">
        <el-table :data="userList">
            <el-table-column property="uname" label="姓名" width="150" />
            <el-table-column property="unumber" label="身份证" width="200" />
            <el-table-column property="uphone" label="电话" />
            <el-table-column property="ustart" label="入住时间" />
            <el-table-column property="uend" label="退房时间" />
        </el-table>
    </el-dialog>
    <!-- 入住对话框开始 -->
    <el-dialog v-model="userInShow" title="登记用户信息" width="500">
        <el-form>
            <el-form-item label="姓名" label-width="20%">
                <el-input v-model="userIn.uname" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="身份证号码" label-width="20%">
                <el-input v-model="userIn.unumber" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="电话" label-width="20%">
                <el-input v-model="userIn.uphone" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="入住房号" label-width="20%">
                <el-input v-model="userIn.rnumber" disabled autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="入住时间" label-width="20%">
                <el-date-picker v-model="userIn.ustart" type="date" placeholder="请选择日期" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" style="width: 300px" />
            </el-form-item>
            <el-form-item label="退房时间" label-width="20%">
                <el-date-picker v-model="userIn.uend" type="date" placeholder="请选择日期" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" style="width: 300px" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="userInShow = false">
                    取消
                </el-button>
                <el-button type="primary" @click="insetUser">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 入住对话框结束 -->

    <!-- 修改房间对话框开始 -->
    <el-dialog v-model="roomUpdateShow" title="修改房间信息" width="500">
        <el-form>
            <el-form-item label="房号" label-width="20%">
                <el-input v-model="roomUpdate.rnumber" disabled autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="房间名称" label-width="20%">
                <el-input v-model="roomUpdate.rname" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="价格" label-width="20%">
                <el-input v-model="roomUpdate.rprice" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="状态" label-width="20%">
                <el-radio-group v-model="roomUpdate.rstate">
                    <el-radio :value="1"><el-tag type="success">可入住</el-tag></el-radio>
                    <el-radio :value="2"><el-tag type="info">已入住</el-tag></el-radio>
                    <el-radio :value="3"><el-tag type="warning">打扫维护</el-tag></el-radio>
                    <el-radio :value="4"><el-tag type="primary">已预定</el-tag></el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="roomUpdateShow = false">
                    取消
                </el-button>
                <el-button type="primary" @click="updateRoom">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 修改房间对话框结束 -->
</template>
<script setup>
import roomApi from '@/api/roomApi';
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ElLoading } from 'element-plus';
import userApi from '@/api/userApi';
//单选框状态
const roomState = ref(0);


//查看用户对话框
const selectUsers = ref(false);
//添加用户对话框状态
const userInShow = ref(false);
//修改房间对话框状态
const roomUpdateShow = ref(false);
//搜索房间号关键字
const rnumber = ref('')
//所有房间信息
const roomList = ref({
    total: 0,
    pageSize: 0,
});
//查看房间用户信息
const userList = ref({
    uname: '',
    unumber: '',
    uphone: '',
    ustart: '',
    uend: '',
});
//入住用户信息
const userIn = ref({
    uname: '',
    unumber: '',
    uphone: '',
    rnumber: '',
    ustart: '',
    uend: '',
    ustate: 1
})
//修改房间信息
const roomUpdate = ref({
    rid: '',
    rnumber: '',
    rname: '',
    rprice: '',
    rstate: ''
})
const now = new Date();
const year = now.getFullYear();
const month = ('0' + (now.getMonth() + 1)).slice(-2);
const day = ('0' + now.getDate()).slice(-2);
const formattedTime = `${year}-${month}-${day}`
console.log(formattedTime);

//查看房间用户信息
function selectUserByRid(rid) {
    roomApi.selectUsersByRid(rid)
        .then(resp => {
            userList.value = resp.data;
            selectUsers.value = true;
        })
}
//修改对话框显示房间信息
function selectByRnumber(rnumber) {
    roomApi.selectByRnumber(rnumber)
        .then(resp => {
            roomUpdate.value = resp.data;
            roomUpdateShow.value = true;
        })
}
//修改房间信息
function updateRoom() {
    roomApi.update(roomUpdate.value)
        .then(resp => {
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1500
                })

                selectAll(roomList.value.pageNum);
                roomUpdateShow.value = false;
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 1500
                });
            }
        })

}

//退房
function updateUserAndRoomState(rnumber) {
    ElMessageBox.confirm(
        '确认退房?',
        '退房',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            roomApi.updateUserAndRoomState(rnumber)
                .then(resp => {
                    if (resp.code == 10000) {
                        ElMessage({
                            message: resp.msg,
                            type: 'success',
                            duration: 1500
                        })
                        selectAll(roomList.value.pageNum);
                    } else {
                        ElMessage({
                            message: resp.msg,
                            type: 'error',
                            duration: 1500
                        });
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消退房',
            })
        })
}
//查询入住房间号并展示
function rnumberToAdd(rnumber) {
    userIn.value.rnumber = rnumber;
    userIn.value.ustart = formattedTime;
    userInShow.value = true;
}
//办理入住
function insetUser() {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中',
        background: 'rgba(0, 0, 0, 0.7)',
    })

    userApi.insert(userIn.value)
        .then(resp => {
            loading.close();
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1500
                })
                userInShow.value = false;
                userIn.value = {
                    uname: '',
                    unumber: '',
                    uphone: '',
                    rnumber: '',
                    ustart: '',
                    uend: '',
                    ustate: 1
                }
                selectAll(roomList.value.pageNum);
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 1500
                });
            }
        })

}
//分页查询所有
function selectAll(pageNum) {
    roomApi.selectAll(pageNum, rnumber.value,roomState.value)
        .then(resp => {
            roomList.value = resp.data
        });
}
//删除房间
function deleteByRnumber(rnumber) {
    ElMessageBox.confirm(
        '确认删除该房间?',
        '删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            roomApi.delectByRnumber(rnumber)
                .then(resp => {
                    if (resp.code == 10000) {
                        ElMessage({
                            message: resp.msg,
                            type: 'success',
                            duration: 1500
                        })
                        selectAll(roomList.value.pageNum);
                    } else {
                        ElMessage({
                            message: resp.msg,
                            type: 'error',
                            duration: 1500
                        });
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })

}

selectAll(1);

</script>
<style scoped></style>